<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        {{date | formatDate}}
    </div>

<script src="https://unpkg.com/vue@2.6.1/dist/vue.min.js"></script>
<script>
    //在月份、日期、小时等小于10时前面补0
    var padDate = function (value) {
        return value < 10 ? '0' + value : value;
    };

    var demo = new Vue({
        el: '#demo',
        data: {
            date: new Date()
        },
        filters: {
             formatDate: function (value) {
                 var date = new Date(value);
                 var year = date.getFullYear();
                 var month = padDate(date.getMonth() + 1);
                 var day = padDate(date.getDate());
                 var hours = padDate(date.getHours());
                 var minutes = padDate(date.getMinutes());
                 var seconds = padDate(date.getSeconds());
                 //将整理好的数据返回回去
                 return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
             }
        },
        mounted: function () {
            var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(function () {
                _this.date = new Date();
            },1000);
        },
        beforeDestroy: function () {
            if(this.timer){
                clearInterval(this.timer); //在Vue实例被销毁前，清除我们的定时器
            }
        }
    });
</script>
</body>
</html>